<template>
  <div class="view-qrcode">
    <div
      v-if="type === 'QR_CODE'"
      class="mt10 flex-center"
    >
      <!--      二维码-->
      <vue-qr
        class="fa-qrcode"
        :margin="10"
        :size="150"
        :text="getCodeJson(code)"
      />
    </div>
    <svg
      v-else
      id="barcode"
    ></svg>
    <div
      v-copyText="code"
      class="text-center mb10 mt10"
    >
      {{ $t("rform.submitResult.verificationCode") }}： {{ code }}
    </div>
    <div
      class="fa-text"
      v-html="descText"
    ></div>
  </div>
</template>
<script setup lang="ts">
import VueQr from "vue-qr/src/packages/vue-qr.vue";
import JsBarcode from "jsbarcode";
import { nextTick, onMounted } from "vue";

const props = defineProps({
  formKey: {
    type: String,
    default: ""
  },
  type: {
    type: String,
    default: "QR_CODE"
  },
  code: {
    type: String,
    default: ""
  },
  descText: {
    type: String,
    default: ""
  }
});
const getCodeJson = (code: string) => {
  return `${props.formKey},${code}`;
};

onMounted(() => {
  //  生成核销码
  nextTick(() => {
    if (props.type === "BAR_CODE") {
      JsBarcode("#barcode", getCodeJson(props.code), {
        height: 70,
        width: 1,
        fontSize: 14,
        format: "CODE128",
        text: getCodeJson(props.code),
        displayValue: false,
        textPosition: "bottom"
      });
    }
  });
});
</script>

<style scoped lang="scss">
.view-qrcode {
  text-align: center;
}
</style>
